<template>
  <view class="wrap">
    <image src="../../../static/mine.png" class="mineBg"></image>
    <uv-navbar title="" placeholder autoBack leftIconColor='#000' bgColor="rgba(0,0,0,0)"></uv-navbar>
    
    <view class="userInfo">
      <view class="left">
        <view class="avatar">
          <image :src="setUrl(userDetail.avatar)" mode="aspectFill" class="img"></image>
        </view>
        <view class="user">
          <view class="title">
            <text class="name">{{ userDetail.nickname }}</text>
          </view>
        </view>
      </view>
      <view class="right" :class="{ red: userDetail.is_follow == 0 }" @click="followUser">{{ userDetail.is_follow == 0 ? '关注' : '已关注' }}</view>
    </view>
    <view class="content">{{ userDetail.bio }}</view>
    <view class="box">
      <view class="tabs">
        <uv-tabs :list="tabList" :current='active' :scrollable='false' lineWidth='36rpx' lineHeight='6rpx' lineColor='#E43222' inactiveStyle='font-weight: 500; font-size: 28rpx; color: #999999;' activeStyle='font-weight: 500; font-size: 28rpx; color: #2B2B2B;' itemStyle='height: 90rpx' @click="tabsClick"></uv-tabs>
      </view>
      <uv-line hairline></uv-line>
      <view class="list">
        <template v-if="active == 0 || active == 4 || active == 3">
          <news :detail='item' v-for="(item, index) in list" :key="index" :order='false' @followClick='followClick'></news>
        </template>
        <template v-if="active == 1">
          <course :detail='item' v-for="(item,index) in list" :key="index"></course>
        </template>
        <template v-if="active == 2">
          <view class="takes">
            <live :detail='item' v-for="(item,index) in list" :key="index"></live>
          </view>
        </template>
      </view>
      <uv-empty :show='showLeng' mode="list" marginTop='100rpx'></uv-empty>
      <view style="height: 50rpx;width: 100%;"></view>
    </view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import news from '../../../components/dynamic/news.vue';
import course from '../../../components/lesearch/course.vue';
import live from '../../../components/myTheme/live.vue'
import { ref, computed } from 'vue';
import { post } from '@/api';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { setUrl } from '@/common';

const tabList = [
  {name: '图文', type: {type: 1}},
  {name: '系列课'},
  {name: '直播'},
  {name: '视频', type: {type: 3}},
  {name: '文件', type: {type: 2}},
];
let active = ref(0);
let userDetail = ref({});
let userId = ref();
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

onLoad((option) => {
  userId.value = option.id;
})
onShow(() => {
  setTimeout(() => {
    getUserDetail();
    
    if(active.value == 0 || active.value == 4){
      initList(tabList[active.value].type);
    }
  }, 100)
})

// 获取用户信息
function getUserDetail(){
  post('api/user/getUserDetail', { access_user_id: userId.value }).then(res => {
    const data = res.data;
    userDetail.value = data;
  })
}
// 获取动态列表
function getThemeList(value){
  const obj = {
    page,
    limit,
    form_user_id: userId.value,
    type: tabList[active.value].type.type
  }
  post('api/news/getNewsList', obj).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function getCourse(){
  const obj = {
    page,
    pagePer: limit,
    userId: userId.value,
  }
  post('/api/lesson/getLessonsByUser', obj).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function getLive(){
  const params = {
    page,
    pagePer: limit,
    userId: userId.value
  }
  post('/api/Live/getLiveByUser', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
// 关注
function followUser(){
  const params = {
    follow_user_id: userId.value,
    way: userDetail.value.is_follow == 1 ? 2 : 1
  }
  post('api/user_follow/followUser', params).then(res => {
    if(res.code == 1){
      userDetail.value.is_follow = userDetail.value.is_follow == 1 ? 0 : 1;
    }
  })
}
function followClick(row){
  getUserDetail();
  list.value.forEach(e => {
    if(row.userId == e.user.id){
      e[row.type] = e[row.type] == 1 ? 0 : 1;
    }
  })
}
function initList(){
  list.value = [];
  page = 1;
  if(active.value == 0 || active.value == 4 || active.value == 3){
    getThemeList();
  }
  if(active.value == 1){
    getCourse();
  }
  if(active.value == 2){
    getLive();
  }
}
function tabsClick(value){
  active.value = value.index;
  initList();
}
</script>

<style lang="scss" scoped>
  .list{
    padding: 0 30rpx;
  }
  .takes{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 20rpx;
  }
  .box{
    width: 100%;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0;
    /* #ifdef H5 */
    margin-top: 60rpx;
    /* #endif */
    /* #ifndef H5 */
    margin-top: 40rpx;
    /* #endif */
    position: relative;
    z-index: 3;
    .tabs{
      padding: 0 30rpx;
    }
  }
  .content{
    font-weight: 400;
    font-size: 28rpx;
    color: #737373;
    position: relative;
    z-index: 2;
    padding: 0 30rpx;
  }
  .userInfo{
    width: 100%;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding-top: 44rpx;
    padding-bottom: 40rpx;
    .right{
      width: 128rpx;
      height: 64rpx;
      line-height: 64rpx;
      background: #F5F5F5;
      border-radius: 64rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #B8B8B8;
      text-align: center;
      &.red{
        color: #FFFFFF;
        background-color: #E43222;
      }
    }
    .left{
      display: flex;
      align-items: center;
      .user{
        padding-left: 24rpx;
        .title{
          display: flex;
          align-items: center;
          .name{
            font-weight: 500;
            font-size: 40rpx;
            color: #2B2B2B;
            padding-right: 8rpx;
          }
        }
      }
      .avatar{
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
  .mineBg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>